<!--
 * @author: 十一
 * @since: 2024-04-22
 * index.vue
 * @desc: new page
-->
<template>
  <PageHeader title="分类">
    <template v-slot:S1>
      <a-button key="2" @click="getData">
        <template #icon>
          <i class="iconfont icon-content icon-shuaxin mr-2"></i>
        </template>
        刷新</a-button
      >
      <a-button key="1" type="primary" @click="showDrawer(0, {})">新增</a-button>
    </template>
  </PageHeader>
  <a-form layout="inline">
    <a-form-item class="!mb-4">
      <a-select
        v-model:value="pagination.type"
        allowClear
        placeholder="请选择分类类型"
        style="width: 180px"
        @change="changeclassify"
      >
        <a-select-option :value="item.code" v-for="item in types" :key="item.id">{{
          item.title
        }}</a-select-option>
      </a-select>
    </a-form-item>
    <a-form-item>
      <a-button type="primary" @click="getData">查询</a-button>
    </a-form-item>
  </a-form>
  <a-table :dataSource="dataSource" :columns="columns" bordered :pagination="false">
    <template #bodyCell="{ column, value }">
      <template v-if="column.key === 'img_url'">
        <img :src="value" style="width: 30px" />
      </template>

      <template v-if="column.key === 'type'">
        {{ formatDictionaryItem('CLASSIFICATION', value) }}
      </template>

      <template v-if="column.key === 'created_at'">
        {{ formatDate(value, 'YYYY-MM-DD HH:MM:SS') }}
      </template>
      <template v-if="column.key === 'operation'">
        <a-tag color="#2db7f5" style="cursor: pointer" @click="showDrawer(1, value)">编辑</a-tag>
        <a-tag color="#f50" style="cursor: pointer" @click="handleDelete(value)">删除</a-tag>
      </template>
    </template>
  </a-table>
  <br />
  <a-pagination
    v-model:current="pagination.current"
    :total="pagination.total"
    @change="changePagination"
    :show-total="(total) => `共 ${total} 数据`"
    style="float: right"
  />
  <ClassificationComponents ref="classificationComponentsRefs" @childGetData="getData" />
</template>

<script lang="ts" setup>
import PageHeader from '@/components/pageHeader.vue'
import { CloudSyncOutlined } from '@ant-design/icons-vue'
import ClassificationComponents from './components/classification-components.vue'
import { reactive, ref, toRaw } from 'vue'
import type { UnwrapRef } from 'vue'
import { getClassificationList, deleteClassification } from '@/servers/main'
import { message } from 'ant-design-vue'
import { formatDate, formatDictionaryList } from '@/utils/common'
import { formatDictionaryItem } from '@/utils/common'
import { useDictionaryStore } from '@/stores/useDictionaryStore'
const { dictionary } = useDictionaryStore()
const types = formatDictionaryList(dictionary, 'CLASSIFICATION')
let pagination = reactive({
  pageSize: 10,
  current: 1,
  type: ''
})
let classificationComponentsRefs: any = ref('')
function changeclassify(value: number) {
  console.log(value)
  pagination.current = 1
}
const drawerOptions = reactive({
  title: '新增分类',
  options: {},
  state: 0
})
function showDrawer(state: number, value: object) {
  drawerOptions.state = state
  if (state == 0) {
    ;(drawerOptions.title = '新增分类'), (drawerOptions.options = {})
  } else {
    ;(drawerOptions.title = '编辑'), (drawerOptions.options = value)
  }
  classificationComponentsRefs.value.showDrawer(drawerOptions)
}
function changePagination(page: number, pagesize: number) {
  pagination.current = page
  pagination.pageSize = pagesize
  getData()
}
function getData() {
  const { total, ...result } = toRaw(pagination)
  getClassificationList(result).then((response) => {
    dataSource.value = response.result.list
    pagination.total = response.result.total
  })
}
getData()

// 删除
function handleDelete(value: object) {
  deleteClassification({ id: value.id }).then((response: any) => {
    if (response.code == 200) {
      message.success('删除成功')
      pagination.current = 1
      getData()
    } else {
      message.error('删除失败')
    }
  })
}
const dataSource = ref([])
const columns = reactive([
  {
    title: '缩略图',
    dataIndex: 'img_url',
    key: 'img_url',
    align: 'center',
    width: 80
  },
  {
    title: '分类类型',
    dataIndex: 'type',
    key: 'type',
    align: 'center'
  },
  {
    title: '分类标题',
    dataIndex: 'title',
    key: 'title',
    align: 'center'
  },
  {
    title: '分类描述',
    dataIndex: 'description',
    key: 'description',
    align: 'center'
  },
  {
    title: '创建时间',
    dataIndex: 'created_at',
    key: 'created_at',
    align: 'center'
  },
  {
    title: '操作',
    key: 'operation',
    align: 'center',
    width: 140
  }
])
</script>

<style lang="less" scoped></style>
